import React from 'react';
import * as echarts from 'echarts';

export interface ChartProps {
  text?: string;
  width?: number;
  height?: number;
  data?: any;
  freshNum?: 1;
}
let theChat: any = React.createRef();
const EchartYongH: React.FC<ChartProps> = (props: ChartProps) => {
  React.useEffect(() => {
    const myChart = echarts.init(theChat);
    const option = {
      title: {
        text: props.text,
      },
      // legend: {
      //   data: ['需求', '供应'],
      // },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: '销售', max: 52000 },
          { name: '采购', max: 52000 },
          { name: '工单', max: 52000 },
          { name: '库存', max: 52000 },
          { name: '检验', max: 52000 },
          { name: '不合格', max: 52000 },
        ],
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          data: [
            {
              value: [52000, 52000, 52000, 52000, 52000, 52000],
              name: '需求',
              label: {
                show: true,
                formatter: function (params: any) {
                  return params.value as string;
                },
              },
            },
            {
              value: [
                props.data.poQty,
                props.data.poQty,
                props.data.jobQty,
                props.data.onhandQty,
                props.data.insQty,
                props.data.nonConfQty,
              ],
              name: '供应',
              label: {
                show: true,
                formatter: function (params: any) {
                  return params.value as string;
                },
              },
            },
          ],
        },
      ],
    };

    // 绘制图表
    myChart.setOption(option);
  }, [props.freshNum, props.data]);
  return <div ref={(ref) => (theChat = ref)} style={{ height: props.height }}></div>;
};
export default EchartYongH;
